<!---
  表格組件封裝
<---->
<template>
  <div :class="{'them-table-warp':!config.defaultClass,'table_warp':true}" style="margin-top: 6px">

    <el-table
      v-loading="isLoading"
      ref="mTable"
      :data="datas"
      :stripe="config.stripe"
      :border="true"
      :fit="config.fit"
      :show-header="config.showHeader"
      :highlight-current-row="config.highlightCurrentRow"
      :current-row-key="config.currentRowKey"
      :row-class-name="config.rowClassName"
      :row-style="config.rowStyle"
      :cell-class-name="config.cellClassName"
      :cell-style="config.cellStyle"
      :header-row-class-name="config.headerRowClassName"
      :header-row-style="config.headerRowStyle"
      :header-cell-class-name="config.headerCellClassName"
      :header-cell-style="config.headerCellStyle"
      :row-key="config.rowKey"
      :empty-text="config.emptyText"
      :default-expand-all="config.defaultExpandAll"
      :expand-row-keys="config.expandRowKeys"
      :default-sort="config.defaultSort"
      :tooltip-effect="config.tooltipEffect"
      :show-summary="config.showSummary"
      :sum-text="config.sumText"
      :summary-method="config.summaryMethod"
      :span-method="config.spanMethod"
      :select-on-indeterminate="config.selectOnIndeterminate"
      size="mini"
      style="width: 100%"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.3)"
      @selection-change="onSelectionChange"
      @row-dblclick="onRowDblclick"
    >
      <template v-for="item in columns">
        <el-table-column v-if="'ID'===item.type" :fixed="item.fixed" :width="item.width" :label="item.label" align="center">
          <template slot-scope="scope">
            <span class="el-table-clouns id ">{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="'RMB'===item.type" :fixed="item.fixed" :width="item.width" :label="item.label" align="center">
          <template slot-scope="scope">
            <span class="el-table-clouns rmb  iconfont icon-fl-renminbi">{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="'avatar'===item.type" :fixed="item.fixed" :width="item.width" :label="item.label" align="center">
          <template slot-scope="scope">
            <img :src="datas[scope.$index][item.prop]" style="width: 40px;height:40px;border-radius: 50%;">
          </template>
        </el-table-column>
        <el-table-column v-else-if="'image'===item.type" :fixed="item.fixed" :width="item.width" :label="item.label" align="center">
          <template slot-scope="scope">
            <img :src="datas[scope.$index][item.prop]" style="width: 120px;height: 40px">
          </template>
        </el-table-column>
        <el-table-column v-else-if="'edit'===item.type" :fixed="item.fixed" :width="item.width" :label="item.label" align="center">
          <template slot-scope="scope">
            <el-input v-model="datas[scope.$index][item.prop]" min="0" type="number" step="0.01" clearable/>
          </template>
        </el-table-column>
        <el-table-column v-else-if=" item.type === 'handle'" :fixed="item.fixed" :width="item.width" align="center" label="操作 ">
          <template slot-scope="scope" >
            <el-button-group>
              <el-button
                v-for="(b, i) in item.buttons"
                v-if="!b.isShow || b.isShow(scope.row,scope.$index)"
                :key="i"
                :type="b.type"
                plain
                class="handle-button"
                size="mini"
                @click="onHandleClick(i,scope.row,scope.$index)" >{{ b.text }} </el-button>
            </el-button-group>
          </template>

          <!--:class="{'handle-button':'handle','success':b.type==='success', 'primary':b.type==='primary','danger':b.type ==='danger','info':b.type==='info','warning':b.type==='warning'}"-->
        </el-table-column>
        <el-table-column v-else-if="(item.type ==='selection' || item.type=== 'index' || item.type==='expand') && !item.hide " :fixed="item.fixed" :key="item.type" :type="item.type" />
        <el-table-column
          v-else-if=" !item.formatter && !item.hide "
          :key="item.prop"
          :fixed="item.fixed"
          :prop="item.prop"
          :width="item.width"
          :label="item.label"
          :render-header="item.renderHeader"
          :sortable="item.sortable"
          :sort-by="item.sortBy"
          :sort-orders="item.sortOrders"
          :resizable="item.resizable"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :align="!item.align?'center':item.align"
          :header-align="item.headerAlign"
          :class-name="item.className"
          :label-class-name="item.labelClassName"
          :selectable="item.selectable"
          :reserve-selection="item.reserveSelection"
          :filters="item.filters"
          :filter-placement="item.filterPlacement"
          :filter-multiple="item.filterMultiple"
          :filter-method="item.filterMethod"
          :filtered-value="item.filteredValue"/>
        <el-table-column
          v-else-if="!item.type && item.formatter "
          :key="item.prop"
          :fixed="item.fixed"
          :prop="item.prop"
          :width="item.width"
          :label="item.label"
          :render-header="item.renderHeader"
          :sortable="item.sortable"
          :sort-by="item.sortBy"
          :sort-orders="item.sortOrders"
          :resizable="item.resizable"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :align="!item.align?'center':item.align"
          :header-align="item.headerAlign"
          :class-name="!item.className?'defalut-cloum':item.className "
          :label-class-name="item.labelClassName"
          :selectable="item.selectable"
          :reserve-selection="item.reserveSelection"
          :filters="item.filters"
          :filter-placement="item.filterPlacement"
          :filter-multiple="item.filterMultiple"
          :filter-method="item.filterMethod"
          :filtered-value="item.filteredValue">
          <template slot-scope="scope">
            <span v-if="item.formatter==='date' " >{{ new Date(scope.row[item.prop]).toLocaleString() }}</span>
            <img v-else-if="item.formatter==='head'" :src=" scope.row[item.prop]" class="head_img">
            <span v-else > {{ item.formatter(scope.row,scope.column) }}</span>
          </template>
        </el-table-column>

      </template>
    </el-table>
    <div style="width: 100%;margin-top: 15px">
      <el-pagination
        v-if="page.pages && page.pages>1"
        :current-page="page.current"
        :page-size="page.size"
        :page-count="page.pages"
        style="float: right"
        background
        layout="prev, pager, next"
        @current-change="onCurrentChange"/>
    </div>

  </div>
</template>

<script>
import { baseTableConfig } from '@/utils/baseConfig'

export default {
  name: 'UTable',

  props: {
    autoLoadData: {
      type: Boolean,
      default: true
    },
    searchParams: {
      type: Object,
      default() {
        return {}
      }
    },
    hidelOperate: {
      type: Boolean,
      default: false
    },
    showDel: {
      type: Boolean,
      default: false
    },
    showAdd: {
      type: Boolean,
      default: false
    },
    /**
      *table 列配制
     */
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    localData: {
      type: Array,
      default() {
        return []
      }
    },
    /**
     * 查詢接口
     */
    searchApi: {
      type: Function,
      default() {
        console.error('请设置查询涵数 searchApi')
      }
    },

    /**
     * 刪除接口
     */
    deleteApi: {
      type: Function,
      default() {
        console.error('请设置删除涵数 deleteApi')
      }
    },
    /**
     * 表格配制
     */
    config: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      datas: [],
      isLoading: false,
      tableConfig: baseTableConfig,
      selectDatas: null,
      handles: [],
      page: [],

    }
  },
  watch: {
    searchParams(searchParams) {
      this.refresh()
    },
    localData(localData) {
      this.datas = localData
    }
  },
  created() {
    // 复制对像参数
    this.tableConfig = Object.assign({}, this.tableConfig, this.config)
    this.filtrColumns()
    if (this.localData.length > 0) {
      this.datas = this.localData
    }
    if (this.autoLoadData) {
      this.refresh()
    }
  },
  methods: {
    /**
     * 表格列选择改变事件
     * @param selection
     */
    onSelectionChange(selection) {
      this.selectDatas = selection
    },
    onRowDblclick(row, event) {
      this.$emit('onRowDblclick', row)
    },

    filtrColumns() {

    },
    refresh: function() {
      this.isLoading = true
      this.searchApi(this.searchParams).then(res => {
        this.isLoading = false
        debugger
        if (res.records) {
          this.datas = res.records
          this.page.pages = res.pages
          this.page.current = res.current
          this.page.size = res.size
        } else {
          this.datas = res
        }
      })
        .catch(_ => {
          this.isLoading = false
        })
    },
    onCurrentChange: function(current) {
      this.searchParams.page = current
      this.refresh()
    },
    getEditRow: function() {
      if (this.selectDatas === null || this.selectDatas.length === 0) {
        this.$message({
          message: '请选择需要编辑的数据行',
          type: 'warning'
        })
        return null
      }
      if (this.selectDatas.length > 1) {
        this.$message({
          message: '请选择一行数据',
          type: 'warning'
        })
        return null
      }
      return this.selectDatas[0]
    },
    getSelectRow() {
      return this.selectDatas
    },
    onHandleClick(buttonIndex, row, rowIndex) {
      debugger
      this.$emit('onHandleClick', buttonIndex, row, rowIndex)
    }
  }

}
</script>
<style   rel="stylesheet/scss" >
</style>
<style scoped  rel="stylesheet/scss" lang="scss">
    .el-form-item {
      margin-bottom: 0px;
    }
    .table_warp{
       width: 100%;
       height: 100%;
       .table_toolbar{
        padding: 10px;
        width: 100%;
        justify-content: space-between;
        display: -webkit-flex; /* Safari */
        display: flex;
        .table-search{
            flex:1
        }
        .table-operate{

        }
      }
    }
    .handle-button{
      padding: 7px 10px;
      &.primary{
         color: #409eff;
       }
      &.success{
        color: #67c23a;
      }
      &.info{
        color: #909399;
      }
      &.warning{
        color: #e6a23c;
      }
      &.danger{
        color: #f56c6c;
      }
    }
    .el-table-clouns{
      &.rmb{
          color: #CC0033;
          font-size: 12px;
      }
      &.id{
         color: blue;
         cursor: pointer;
         text-decoration: underline;
      }
    }

</style>
